<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="UTF-8">
    <title>超市订单管理系统</title>
    <link type="text/css" rel="stylesheet" href="/static/css/style.css" />
    <link type="text/css" rel="stylesheet" href="/static/css/public.css" />
    <link th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.min.css}" rel="stylesheet">
    <script type="text/javascript" th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
</head>
<div th:replace="head::header"></div>
<div class="right">
    <div class="location">
        <strong>你现在所在的位置是:</strong>
        <span>订单管理页面</span>
    </div>
    <div class="search">
        <form method="post" action="/bill/findByAdd">
            <input name="method" value="query" class="input-text" type="hidden">
            <span>订单编号：</span>
            <input name="billCode" class="input-text" type="text">
            <span>产品名称：</span>
            <input name="productName" class="input-text" type="text">
            <input type="hidden" name="pageIndex" id="pageIndex" value="1"/>
            <input	value="查 询" type="submit" id="searchbutton">
            <a href="/bill/sendToAdd" >添加</a>
        </form>
    </div>
    <!--用户-->
    <table class="table table-hover" cellpadding="0" cellspacing="0">
        <tr class="firstTr">
            <th width="10%">订单编码</th>
            <th width="15%">产品名称</th>
            <th width="10%">产品描述</th>
            <th width="10%">总数</th>
            <th width="10%">金额</th>
            <th width="5%">付款状态</th>
            <th width="20%">供应商名称</th>
            <th width="30%">操作</th>
        </tr>

        <tr th:each="bill:${bills}">
            <td>
                <span th:text="${bill.billCode }"></span>
            </td>
            <td>
                <span th:text="${bill.productName }"></span>
            </td>
            <td>
                <span th:text="${bill.productDesc }"></span>
            </td>
            <td>
                <span th:text="${bill.productCount}"></span>
            </td>
            <td>
                <span th:text="${bill.totalPrice}"></span>
            </td>
            <td th:if="${bill.isPayment}==1">
                <span th:text="未完成"></span>
            </td>
            <td th:if="${bill.isPayment}==2">
                <span th:text="完成"></span>
            </td>
            <td>
                <span th:text="${bill.provider.proName}"></span>
            </td>
            <td>
            <span><a id="viewPro" href="#" data-toggle="modal"
                     data-target="#myModal"><img src="/static/images/read.png" alt="查看" title="查看"/></a></span>
                <span><a class="update" th:href="@{/bill/update_bill(id=${bill.id})}" data-toggle="modal"
                         data-target="#updateModal"><img src="/static/images/xiugai.png" alt="修改" title="修改"/></a></span>
                <form id="deleteForm" th:action="@{/bill/del_bill(id=${bill.id})}" method="post">
                    <input type="hidden" name="_method" value="DELETE"/>
                </form>
                <span><a class="deleteBtn" th:href="@{/bill/del_bill(id=${bill.id})}"><img src="/static/images/schu.png" alt="删除" title="删除"/></a></span>

            </td>
            <!-- 查看用户信息模态框（Modal） -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel">
                                订单信息
                            </h4>
                        </div>
                        <div class="modal-body">
                            <div class="col-md-12">
                                <label>订单编码：</label>
                                <span id="userCode" th:text="${bill.billCode}"></span>
                            </div>
                            <div class="col-md-12">
                                <label>产品名称：</label>
                                <span  th:text="${bill.productName}"></span>
                            </div>
                            <div class="col-md-12">
                                <label>产品描述：</label>
                                <span th:text="${bill.productDesc}"></span>
                            </div>
                            <div class="col-md-12">
                                <label>总数：</label>
                                <span th:text="${bill.productCount}"></span>
                            </div>
                            <div class="col-md-12">
                                <label>金额：</label>
                                <span th:text="${bill.totalPrice}"></span>
                            </div>
                            <div class="col-md-12">
                                <label>付款状态：</label>
                                <span th:if="${bill.isPayment}==1">
                                    <span th:text="未完成"></span>
                                </span>
                                <span th:if="${bill.isPayment}==2">
                                    <span th:text="完成"></span>
                                </span>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                            </button>

                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->

            </div>

            <!-- 修改供应商信息模态框（Modal） -->
            <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="updateModalLabel">
                                修改订单信息
                            </h4>
                        </div>
                        <div class="modal-body">
                            <form th:action="@{/bill/update_bill(id=${bill.id})}" method="post">
                                <div class="form-group">
                                    <label>订单编码：</label>
                                    <input class="form-control" th:value="${bill.billCode}" name="billCode">
                                </div>
                                <div class="form-group">
                                    <label>产品名称：</label>
                                    <input  class="form-control" th:value="${bill.productName}" name="productName">
                                </div>
                                <div class="form-group">
                                    <label>产品描述：</label>
                                    <input  class="form-control" th:value="${bill.productDesc}" name="productDesc">
                                </div>
                                <div class="form-group">
                                    <label>总数：</label>
                                    <input  class="form-control" th:value="${bill.productCount}" name="productCount">
                                </div>
                                <div class="form-group">
                                    <label>金额：</label>
                                    <input class="form-control" th:value="${bill.totalPrice}" name="totalPrice">
                                </div>
                                <div class="form-group">
                                    <label>支付状态：</label>
                                    <input class="form-control" th:value="${bill.isPayment}" name="isPayment">
                                </div>
                                <div class="form-group">
                                    <label>供应商名称：</label>
                                    <input class="form-control" th:value="${bill.provider.proName}" name="proName">
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    <button type="submit" class="btn btn-primary" >保存</button>
                                </div>
                            </form>
                        </div>

                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->

        </tr>

        </th:forEach>
    </table>
    <!-- 显示分页信息 -->
    <div class="row">
        <!--分页文字信息  -->
        <div class="col-md-6" id="page_info_area">
            当前<span th:text="${pageInfo.pageNum}"></span>页，
            总<span th:text="${pageInfo.pages}"></span>页，
            总<span th:text="${pageInfo.total}"></span>条记录
        </div>
        <!-- 分页条信息 -->
        <div class="col-md-6" id="page_nav_area">
            <ul class="pagination">
                <li><a th:href="@{/bill/findBills(pn=${pageInfo.getFirstPage()})}">首页</a></li>
                <li><a th:href="@{/bill/findBills(pn=${pageInfo.getPrePage()})}">&laquo;</a></li>
                <li th:each="p : ${pageInfo.navigatepageNums}">
                    <a th:text="${p}" th:href="@{/bill/findBills(pn=${p})}"> </a>
                </li>
                <li><a th:href="@{/bill/findBills(pn=${pageInfo.getLastPage()})}">末页</a></li>
            </ul>
        </div>
    </div>
</div>
</section>

<!--点击删除按钮后弹出的页面-->
<div class="zhezhao"></div>
<div class="remove" id="removeUse">
    <div class="removerChid">
        <h2>提示</h2>
        <div class="removeMain">
            <p>你确定要删除该供应商吗？</p>
            <a href="#" id="yes">确定</a>
            <a href="#" id="no">取消</a>
        </div>
    </div>
</div>

<div th:replace="foot::footer"></div>
<script>
    $('.update').click(function () {
        $link =$(this.href);
        alert("显示模态框" + $link);

        $('#updateModal').on(function () {
            //需要异步获取员工数据和部门数据，可以单独封装函数
            $.ajax({
                //请求方式
                type : "POST",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url : $link,
                //数据，json字符串
                //data : JSON.stringify(list),
                //请求成功
                success : function(result) {
                    console.log(result);
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });
        });
    })
    $(".deleteBtn").click(function() {
        //1.改变表单的action指向
        $("#deleteForm").attr("action",this.href);
        //2.提交表单
        $("#deleteForm").submit();
        return false;
    });
</script>
<script type="text/javascript" src="/static/js/userlist.js"></script>

